<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RA.Aid Web UI</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/tokyo-night-dark.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'dark-primary': '#1a1b26',
                        'dark-secondary': '#24283b',
                        'dark-accent': '#414868',
                        'dark-text': '#a9b1d6',
                        'dark-background': '#16161e'
                    }
                }
            }
        }
    </script>
    <style>
        /* Core styles */
        body {
            background-color: #16161e;
            color: #a9b1d6;
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* Output area */
        #stream-output {
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
            background-color: #1a1b26;
            margin: 0;
            display: block !important;
            min-height: 300px;
            font-family: monospace;
            white-space: pre-wrap;
            word-break: break-word;
        }

        /* Message styling */
        .message {
            margin-bottom: 1.5rem;
            padding: 0.75rem 1rem;
            border-radius: 0.375rem;
            background-color: #24283b;
            color: #a9b1d6;
            display: block !important;
            border: 1px solid #414868;
            opacity: 0;
            transform: translateY(20px);
            animation: slideIn 0.3s ease forwards;
        }

        @keyframes slideIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Message types */
        .message.info {
            border-color: #7aa2f7;
        }

        .message.success {
            border-color: #9ece6a;
            background-color: rgba(158, 206, 106, 0.1);
        }

        .message.error {
            border-color: #f7768e;
            background-color: rgba(247, 118, 142, 0.1);
        }

        .message.warning {
            border-color: #e0af68;
            background-color: rgba(224, 175, 104, 0.1);
        }

        /* Section spacing */
        .message.section {
            margin-top: 2rem;
            margin-bottom: 2rem;
            padding: 1rem;
            background-color: rgba(122, 162, 247, 0.1);
        }

        /* Code blocks */
        .message pre {
            margin: 0.5rem 0;
            padding: 0.75rem;
            border-radius: 0.25rem;
            background-color: #1a1b26 !important;
            border: 1px solid #414868;
            overflow-x: auto;
        }

        .message code {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.9em;
        }

        /* Input area */
        .input-area {
            padding: 1rem;
            background-color: #24283b;
            border-top: 1px solid #414868;
        }

        .input-container {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        #user-input {
            flex: 1;
            padding: 0.75rem;
            background-color: #1a1b26;
            border: 1px solid #414868;
            border-radius: 0.375rem;
            color: #a9b1d6;
            font-family: 'JetBrains Mono', monospace;
            transition: border-color 0.2s;
        }

        #user-input:focus {
            outline: none;
            border-color: #7aa2f7;
        }

        /* Buttons */
        .button {
            padding: 0.75rem 1rem;
            background-color: #7aa2f7;
            color: white;
            border: none;
            border-radius: 0.375rem;
            cursor: pointer;
            min-width: 80px;
            transition: background-color 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .button:hover {
            background-color: #5d87e6;
        }

        .button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .button.clear {
            background-color: #414868;
        }

        .button.clear:hover {
            background-color: #363b54;
        }

        /* Icons */
        .icon {
            font-size: 1.2em;
            line-height: 1;
        }
    </style>
</head>
<body>
    <!-- Main Container -->
    <div id="stream-output">
        <!-- Messages will appear here -->
    </div>

    <!-- Input Area -->
    <div class="input-area">
        <div class="input-container">
            <input 
                type="text" 
                id="user-input" 
                placeholder="Type your message..."
            >
            <button id="clear-button" class="button clear" title="Clear conversation">
                <span class="icon">🗑️</span>
            </button>
            <button id="send-button" class="button">
                <span class="icon">📤</span>
                Send
            </button>
        </div>
    </div>

    <script src="/static/script.js"></script>
    <script>
        hljs.highlightAll();
    </script>
</body>
</html>